<template>
  <div style="height:100%;">
    <div class="phm-tanc-top toptitle"><span class="top-title">4C</span>
      <div class="toptitle-input">
        <p class="form-top-p">
          <el-select v-model="valuek.time" clearable placeholder="选择时间">
            <el-option
              v-for="item in datatime"
              :key="item.detectDate"
              :label="item.detectDate"
              :value="item.detectDate" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-select v-model="valuek.tab" clearable placeholder="区域类型">
            <el-option
              v-for="item in tabList"
              :key="item.code"
              :label="item.name"
              :value="item.code" />
          </el-select>
        </p>
      </div>
    </div>
    <div v-loading="loading" class="analysisContainer" style="height:calc(100% - 42px);">
      <div class="img4c">
        <div class="left">
          <el-image
            v-if="imgurl&&imgurl!==''"
            :src="imgurl"
            :preview-src-list="geturllist(typelist)" />
        </div>
        <div class="right">
          <div class="topbtn" @click="prev()"><i class="el-icon-arrow-up" /></div>
          <div ref="imglist" class="imglist">
            <div
              v-for="(item, index) in typelist"
              :key="index"
              class="img4c-item">
              <img :src="getcompressImage(item.picPath)" :class="checknum===index?'active':''" @error="handleImgError" @click="changeurl(item,index)">
            </div>
          </div>
          <div class="bottombtn" @click="next()"><i class="el-icon-arrow-down" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { find4CLateralAnalysis } from '@/api/cms/data-statistics'
export default {
  name: 'Transverse4C',
  props: {
    datatime: {
      type: Array,
      default: () => []
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      checknum: 0,
      imgurl: '',
      valuek: {
        time: '',
        tab: ''
      },
      loading: false,
      queryParams: {},
      tabList: [
        { name: '杆号', code: '1' },
        { name: '附加悬挂', code: '2' },
        { name: '吊柱座', code: '3' },
        { name: '支持装置', code: '4' },
        { name: '接触悬挂', code: '5' }
      ],
      listAll: [], // 存放所有图片列表
      typelist: [],
      listType: {
        '1': [],
        '2': [],
        '3': [],
        '4': [],
        '5': []
      }
    }
  },
  watch: {
    'valuek.tab': function(val) {
      this.typelist = []
      this.$nextTick(_ => {
        if (val && val !== '') {
          this.typelist = this.listType[val]
        } else {
          this.typelist = this.listAll
        }
        this.imgurl = this.typelist[0] ? this.typelist[0].picPath || '' : ''
      })
    },
    'valuek.time': function(val) {
      this.typelist = []
      this.listAll = []
      this.imgurl = ''
      this.listType = {
        '1': [],
        '2': [],
        '3': [],
        '4': [],
        '5': []
      }
      if (val && val !== '') {
        // 1C锚段才有时间轴
        this.queryParams = Object.assign({}, this.params, {
          lineCode: this.params.selectLin ? this.params.selectLin.split('-')[1] : '',
          lineSiteCode: this.params.lineSiteCode ? this.params.lineSiteCode.split('-')[0] : '',
          deptName: this.params.deptCode ? this.params.deptCode.split('-')[1] : '',
          detectDate: val
        })
        this.getC1DataByParams(this.queryParams)
      }
    },
    datatime() {
      this.valuek.time = ''
    }
  },
  mounted() {
  },
  methods: {
    next() {
      if (this.checknum >= this.typelist.length - 1) return
      this.checknum++
      this.$refs.imglist.scrollTop = `${this.checknum * 80}`
      this.imgurl = this.typelist[this.checknum].picPath
    },
    prev() {
      if (this.checknum === 0) return
      this.checknum--
      this.$refs.imglist.scrollTop = `${this.checknum * 80}`
      this.imgurl = this.typelist[this.checknum].picPath
    },
    changeurl(val, index) {
      this.checknum = index
      this.imgurl = val.picPath
    },
    geturllist(list) {
      const arr = []
      list.forEach(item => {
        arr.push(item.picPath)
      })
      return arr
    },
    getC1DataByParams(param) {
      this.loading = true
      var that = this
      find4CLateralAnalysis(param).then(response => {
        this.loading = false
        this.listAll = response.data[param.detectDate].picPathList || []
        this.typelist = response.data[param.detectDate].picPathList || []
        this.imgurl = this.listAll[0].picPath || ''
        const byType = {}
        if (response.data && response.data[param.detectDate] && response.data[param.detectDate].picPathList.length) {
          response.data[param.detectDate].picPathList.forEach(item => {
            if (!byType[item.areaType]) {
              byType[item.areaType] = []
            }
            byType[item.areaType].push(item)
          })
        }
        that.listType = Object.assign({ '1': [], '2': [], '3': [], '4': [], '5': [] }, byType)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-title{
  display: inline-block;
  width: 38px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background:white;
  border-radius: 4px;
  font-size: 18px;
  color: #409eff;
}
  .analysisContainer {
    overflow: auto;
    color: black;

    .form-button {
      float: none;
    }

    .analysisChartGroup {
      position: relative;
      z-index: 1;
      height: 100%;
    }

    .phwidth {
      display: inline-block;
      width: 150px;
    }
  }
.toptitle{
  height: 42px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px;
  background-image: linear-gradient(#F3F5FF, #DFE6FF);
  color: black;
  img{
    height: 14px;
    margin-right: 8px;
  }
}
.form-top-p{
  margin: 0;
  ::v-deep .el-input__icon{
    line-height: 28px;
  }
}
.toptitle-input{
  margin-left: 20px;
  width: 100%;
  display: flex;
  align-items: center;
}
.img4c{
  display:flex;
  height: 100%;
  overflow: hidden;
  .left{
    flex: 1;
    height: 100%;
    .el-image{
      height: 100%;
      width: 100%;
    }
  }
  .right{
    width: 140px;
    position: relative;
    height:calc(100%);
    border-left: solid 1px #aed0ea;
    .topbtn{
      position: absolute;
      height: 16px;
      width: 100%;
      text-align: center;
      color: white;
      background: #aed0ea;
      top: 0;
    }
    .bottombtn{
      position: absolute;
      height: 16px;
      width: 100%;
      color: white;
      text-align: center;
      background: #aed0ea;
      bottom: 0;
    }
    .imglist{
      margin: 16px 0;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      .img4c-item{
      height: 80px;
      width: 100%;
      border-bottom: solid 1px #aed0ea;
      img{
        height: 100%;
        width: 100%;
      }
      .active{
        border: solid 1px black;
      }
    }
    }
    .imglist::-webkit-scrollbar:hover,
    .imglist::-webkit-scrollbar {
        width: 0;
      }
  }
}
</style>
